<template>
  <el-row id="power-manage-container">

    <el-row class="tittle-nav">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        background-color="#17252f"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect" >
        <el-menu-item index="1">统计报表</el-menu-item>
        <el-menu-item index="2">数据分析</el-menu-item>
        <el-menu-item index="3">数据监测</el-menu-item>
      </el-menu>
    </el-row>

    <el-row v-if="isShowTable">
      <power-table></power-table>
    </el-row>

    <el-row v-if="isShowAnalyze">
      <power-analyze></power-analyze>
    </el-row>

    <el-row v-if="isShowMonitor">
      <power-monitor></power-monitor>
    </el-row>

  </el-row>

</template>

<script>
    import PowerTable from "../../../components/PowerManage/powerTable";
    import PowerAnalyze from "../../../components/PowerManage/powerAnalyze";
    import PowerMonitor from "../../../components/PowerManage/powerMonitor";
    export default {
        name: "index",
      components: {
        PowerMonitor,
        PowerTable, PowerAnalyze},
      data(){
          return {
            activeIndex:'1',
            isShowTable: true,
            isShowAnalyze: false,
            isShowMonitor: false
          }
        },
      created() {
        this.$emit('fixHeadIndex', "5")
      },
        methods:{
          handleSelect(key){
            this.activeIndex = key
            switch (key) {
              case "1":{
                this.isShowTable = true
                this.isShowAnalyze = false
                this.isShowMonitor = false
                break
              }
              case "2":{
                this.isShowTable = false
                this.isShowAnalyze = true
                this.isShowMonitor = false
                break
              }
              case "3":{
                this.isShowTable = false
                this.isShowAnalyze = false
                this.isShowMonitor = true
                break
              }
            }
          }
        }
    }
</script>

<style lang="scss">
#power-manage-container{

  .tittle-nav{
    height: 50px;
    background-color: #17252f;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-menu {
    display: inline-block;
    font-size: 14px;
    line-height: 50px;
    margin-left: 8px;
  }

  .el-menu--horizontal > .el-menu-item {
    height: 50px!important;
    line-height: 50px!important;
    margin: 0;
    border-bottom: 0px solid transparent;
  }

  .el-menu.el-menu--horizontal {
    border-bottom: solid 0px #e6e6e6;
  }

  .el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: 0px solid #303133;
    color: #303133;
  }

}
</style>
